

var gl;
var points;

var width=3;//宽度
window.onload = function init()
{
    var canvas = document.getElementById( "gl-canvas" );
    
    gl = WebGLUtils.setupWebGL( canvas );
    if ( !gl ) { alert( "WebGL isn't available" ); }

    
    var vertices=[]
    var vertexColors = [];
    
    ColorCircle(0, 0, 1, 0, 0, 0, vertices, vertexColors);
    PokeBall(0, 0, 0.99, vertices, vertexColors);
    ColorCircle(0, 0, 0.3, 0, 0, 0, vertices, vertexColors);
    ColorCircle(0, 0, 0.20, 1, 1, 1, vertices, vertexColors);
    ColorCircle(0, 0, 0.15, 0, 0, 0, vertices, vertexColors);
    ColorCircle(0, 0, 0.14, 1, 1, 1, vertices, vertexColors);



    



    //  Configure WebGL

    gl.viewport( 0, 0, canvas.width, canvas.height );
    gl.clearColor( 1.0, 1.0, 1.0, 1.0 );
    
    //  Load shaders and initialize attribute buffers
    
    var program = initShaders( gl, "vertex-shader", "fragment-shader" );
    gl.useProgram(program);

    // color array atrribute buffer

    var cBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, flatten(vertexColors), gl.STATIC_DRAW);

    var vColor = gl.getAttribLocation(program, "vColor");
    gl.vertexAttribPointer(vColor, 4, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(vColor);
    
    // Load the data into the GPU    
    var bufferId = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, bufferId );
    gl.bufferData(gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW);      
    
    // Associate out shader variables with our data buffer    
    var vPosition = gl.getAttribLocation( program, "vPosition" );
    gl.vertexAttribPointer( vPosition, 2, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vPosition );

    render();
};



function render() {
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES, 0,  6*3 * num+6 );// gl.drawArrays(mode, first, count). modeΪ��ͼ��ʽ��firstΪ��ʼ�㣬countΪ���������
    //gl.drawArrays(gl.LINES,6*3 * num,4 );//����ֱ��
}


/*
function circle(X,Y,R,vertices,vertexColors)
{
    x = X;
    y = Y;
    r = R;
    num = 100;//��100�������ν��Ƴ�Բ

    for (var i = 0; i < num; i++) {
        vertices.push( x + r * Math.cos(i / num * 2 * Math.PI),
            y + r * Math.sin(i / num * 2 * Math.PI) );
        vertices.push(x, y);
        vertices.push( x + r * Math.cos((i + 1) / num * 2 * Math.PI),
            y + r * Math.sin((i + 1) / num * 2 * Math.PI) );
    };

    for (var j = 0; j < 2*3 *num; j++){
        vertexColors.push(1, 1, 0, 1);
    }

}
*/

function ColorCircle(X, Y, R, Red, Green, Blue, vertices, vertexColors)
{
    x = X;
    y = Y;
    r = R;
    num = 100;//��100�������ν��Ƴ�Բ

    for (var i = 0; i < num; i++) {
        vertices.push(x + r * Math.cos(i / num * 2 * Math.PI),
            y + r * Math.sin(i / num * 2 * Math.PI));
        vertices.push(x, y);
        vertices.push(x + r * Math.cos((i + 1) / num * 2 * Math.PI),
            y + r * Math.sin((i + 1) / num * 2 * Math.PI));
    };

    for (var j = 0; j < 3 * num; j++) {
        vertexColors.push(Red,Green,Blue, 1);
    }
}

function PokeBall(X, Y, R, vertices, vertexColors) {
    x = X;
    y = Y;
    r = R;
    num = 100;//��100�������ν��Ƴ�Բ
    var width = 3;//�м�Ĵ���

    for (var i = 0; i < num; i++) {
        vertices.push(x + r * Math.cos(i / num * 2 * Math.PI),
            y + r * Math.sin(i / num * 2 * Math.PI));
        vertices.push(x, y);
        vertices.push(x + r * Math.cos((i + 1) / num * 2 * Math.PI),
            y + r * Math.sin((i + 1) / num * 2 * Math.PI));
    }
    ;
    for (var i = 0; i < width; i++) {
        vertexColors.push(0, 0, 0, 1);
    }
    ;
    //vertexColors.push(0, 0, 0, 1);
    //vertexColors.push(0, 0, 0, 1);
    //vertexColors.push(0, 0, 0, 1);
    for (var j = width; j < width * num / 2 - width; j++) {
        vertexColors.push(1, 0, 0, 1);
    }
    for (var i = 0; i < 2 * width; i++) {
        vertexColors.push(0, 0, 0, 1);
    }
    ;
    for (var j = 3 * num / 2 + 3; j < 3 * num - 3; j++) {
        vertexColors.push(1, 1, 1, 1);
    }
    ;
    for (var i = 0; i < width; i++) {
        vertexColors.push(0, 0, 0, 1);
    }
    ;
    //以下是填充呈长方形的内容
    //vertices.push(x + r * Math.cos(width / num * 2 * Math.PI),
    //        y + r * Math.sin(width / num * 2 * Math.PI));
    //vertices.push(x, y);

    vertices.push(x + r * Math.cos((width - 1) / num * 2 * Math.PI),
        y + r * Math.sin(((width - 1) / 2) / num * 2 * Math.PI));
    vertices.push(x, y);
    vertices.push(x + r * Math.cos((num / 2 - width + 2) / num * 2 * Math.PI),
        y + r * Math.sin((num / 2 - width + 2) / num * 2 * Math.PI));


    //vertices.push(vertices[2*(3*width-1)-1],vertices[2*(3*width-1)]);
    //vertices.push(vertices[2*(3*(num/2-width-1)-1)-1],vertices[2*(3*(num/2-width-1)-1)]);
    //vertices.push(vertices[2*((num/2-width-1)*3-1)-1)-1],vertices[2*((num/2-width-1)*3-1)-1)]);
    //vertices.push(vertices[2],vertices[3])
    for (var i = 0; i < width; i++) {
        vertexColors.push(0, 0, 0, 1);
    }
    ;
     vertices.push(x + r * Math.cos((num/2+width-2) / num * 2 * Math.PI),
        y + r * Math.sin((num/2+width-2) / num * 2 * Math.PI));
    vertices.push(x, y);
    vertices.push(x + r * Math.cos((num-width+2) / num * 2 * Math.PI),
        y + r * Math.sin((num-width+2) / num * 2 * Math.PI));


    //vertices.push(vertices[2*(3*width-1)-1],vertices[2*(3*width-1)]);
    //vertices.push(vertices[2*(3*(num/2-width-1)-1)-1],vertices[2*(3*(num/2-width-1)-1)]);
    //vertices.push(vertices[2*((num/2-width-1)*3-1)-1)-1],vertices[2*((num/2-width-1)*3-1)-1)]);
    //vertices.push(vertices[2],vertices[3])
    for (var i = 0; i < width; i++) {
        vertexColors.push(0, 0, 0, 1);
    }
    ;
}